<template>
  <div class="app-container">

    <el-row :gutter="24">
      <el-col :span="14">
        <div style="background: hsl(0, 0%, 100%);padding: 50px 20px;border:1px solid #f0eeee;border-radius:15px;">
        <el-form ref="form" :model="form" :rules="rules" :inline="true">
            <el-form-item label="主题" prop="topic">
                <el-input v-model="form.topic"></el-input>
            </el-form-item>
            <el-form-item label="Qos">
                <el-select v-model="form.qos">
                    <el-option label="0" value="0"></el-option>
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm" round>订阅</el-button>
            </el-form-item>
        </el-form>
        <el-table
            :data="toplicList"
            border
            style="width: 95%;">
            <el-table-column  prop="topic" label="主题" />
            <el-table-column  prop="qos" label="qos" />
            <el-table-column
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="removeTopic(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-form ref="subform" :model="subform" :rules="subformRules" :inline="true" style="padding-top: 50px;">
            <el-form-item label="主题" prop="topic">
                <el-input v-model="subform.topic"></el-input>
            </el-form-item>
            <el-form-item label="消息体" prop="data">
                <el-input v-model="subform.data"></el-input>
            </el-form-item>
            <el-form-item label="Qos">
                <el-select v-model="subform.qos">
                    <el-option label="0" value="0"></el-option>
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="submitSubForm" round>发布</el-button>
            </el-form-item>
        </el-form>

        <span>已发布 </span>
        <i class="el-icon-delete" style="color: red" size="mini" @click="clearSubMsg"></i>
        <el-table
            :data="subMsg"
            border
            style="width: 95%">
            <el-table-column  prop="topic" label="主题" />
            <el-table-column  prop="qos" label="qos" />
            <el-table-column  prop="data" label="消息" />
        </el-table>
        </div>
      </el-col>
      <el-col :span="10">
        <span>已接收 </span>
        <i class="el-icon-delete" style="color: red" size="mini" @click="clearResbMsg"></i>
        <el-table
            :data="resMsg"
            border
            style="width: 90%">
            <el-table-column  prop="topic" label="主题" />
            <el-table-column  prop="qos" label="qos" />
            <el-table-column  prop="data" label="消息" />
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getTopics, addTopic, removeTopic, sendMsgToTopic } from '@/api/mqtt/mqtt.js'

export default {
    name: "mqtt",
    data() {
        return {
            form: {qos : 1},
            subform: {
                data: '{ "msg": "hello" }',
                qos: 1
            },
            rules: {
                topic: [
                    { required: true, message: '主题不能为空', trigger: 'blur' },
                ]
            },
            subformRules: {
                topic: [
                    { required: true, message: '主题不能为空', trigger: 'blur' },
                ],
                data: [
                    { required: true, message: '消息不能为空', trigger: 'blur' },
                ]
            },
            toplicList: [],
            subMsg: [],
            resMsg: []
        };
    },
    mounted() {
        this.getTopicsList()
    },
    methods: {
        getTopicsList () {
            getTopics().then(res =>{
                this.toplicList = res.data
            })
        },
         /** 提交订阅按钮 */
         submitForm() {
              this.$refs["form"].validate(valid => {
                  if (valid) {
                      addTopic(this.form).then(response => {
                          this.$modal.msgSuccess("订阅主题成功");
                          this.getTopicsList();
                      })
                  }
              });
          },
         /** 提交发布按钮 */
         submitSubForm() {
            this.$refs["subform"].validate(valid => {
                if (valid) {
                    sendMsgToTopic(this.subform).then(response => {
                        this.$modal.msgSuccess("发布成功");
                        this.getTopicsList();
                        let data = Object.assign({}, this.subform)
                        this.subMsg.push(data)
                        this.resMsg.push(data)
                    })
                }
            });
        },
         /** 删除主题按钮 */
         removeTopic(row) {
            removeTopic({ 'topic': row.topic}).then(response => {
                this.$modal.msgSuccess("删除主题成功");
                this.getTopicsList();
            })
        },
         /** 清除发布信息 */
         clearSubMsg() {
            this.subMsg = []
        },
         /** 清除接受信息 */
         clearResbMsg() {
            this.resMsg = []
        },
    }
}
</script>

<style>

</style>
